<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
		<style type="text/css">
			.radio {
				float: left;
			}	
		</style>
		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<div class="row">
					<!-- /.col-->
					<div class="col-sm-12">
						<div class="card">
							<div class="card-body">

								<form class="form-horizontal m" id="addForm" novalidate="novalidate">
									<input id="applicationId" name="applicationId" th:value="${param.applicationId}" type="hidden" >
									<input id="id" name="id" th:value="${bean.id}" type="hidden" >
									<div class="form-group">
										<label class="col-sm-3 control-label ">上级菜单：</label>
										<div class="col-sm-8">
											<div class="input-group">
												<input class="form-control" type="text" 
													   onclick="selectMenuTree()" 
													   th:value="${@bootWebPageHandle.getResourceName(bean.resourceParent)}"
													   name="resourceParentLabel" id="resourceParentLabel" readonly="true" value="">
												<span class="input-group-addon"><i class="fa fa-search"></i></span>
											</div>
											<input id="resourceParent" name="resourceParent" th:value="${bean.resourceParent}" class="form-control" type="hidden">
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">菜单类型：</label>
										<div class="col-sm-8">
											<div class="radio">
												<label><input type="radio" value="1" id="menuType" th:checked="${bean.menuType eq '1'}" onclick="selectMenuType(this)" name="menuType">目录</label>
											</div>
											<div class="radio">
												<label><input type="radio" value="0" id="menuType" th:checked="${bean.menuType eq '0'}"  onclick="selectMenuType(this)" name="menuType">功能</label>
											</div>
											<div class="radio">
												<label><input type="radio" value="8" id="menuType" th:checked="${bean.menuType eq '8'}"  onclick="selectMenuType(this)" name="menuType">按钮</label>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">菜单名称：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" name="resourceName" th:value="${bean.resourceName}" id="resourceName" required="" aria-required="true">
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">请求地址：</label>
										<div class="col-sm-8">
											<input id="resourceLink" name="resourceLink" th:value="${bean.resourceLink}" class="form-control" type="text">
										</div>
									</div>
									<!-- 
									<div class="form-group">
										<label class="col-sm-3 control-label">打开方式：</label>
										<div class="col-sm-8">
											<select id="target" name="target" class="form-control m-b">
												<option value="menuItem">页签</option>
												<option value="menuBlank">新窗口</option>
											</select>
										</div>
									</div>
									 -->
									<div class="form-group">
										<label class="col-sm-3 control-label">权限标识：</label>
										<div class="col-sm-8">
											<input id="permission" name="permission" th:value="${bean.permission}" class="form-control" type="text">
											<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@OperationPermissions("sys:user:save")</span>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">显示排序：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="resourceOrder" th:value="${bean.resourceOrder}" name="resourceOrder" required="" aria-required="true">
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">图标：</label>
										<div class="col-sm-8" onclick="showFontIcons('resourceIcon','50')" >
											<input id="resourceIcon" name="resourceIcon" th:value="${bean.resourceIcon}" class="form-control" readonly="readonly" type="text" placeholder="选择图标">
											<input type="hidden" name="resourceIconLabel" id="resourceIconLabel" />	
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">菜单状态：</label>
										<div class="col-sm-8">
											<div class="radio">
												<label><input type="radio" value="1" id="visible" name="visible" th:checked="${bean.visible eq '1'}">显示</label>
											</div>
											<div class="radio">
												<label><input type="radio" value="0" id="visible" name="visible" th:checked="${bean.visible eq '0'}">隐藏</label>
											</div>
										</div>
									</div>
								</form>	

							</div>

							<!-- 
							<div class="card-footer">
								<button class="btn btn-primary" style="float: right"
									onclick="save()" type="button">保存</button>
							</div>
							-->

						</div>
					</div>
					<!-- /.col-->
				</div>
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	<script type="text/javascript" th:src="@{/resources/js/common.js}"></script>

	<script type="text/javascript">
		var addForm = $("#addForm") ; 
		
		$(function(){
			var icon = "<i class='fa fa-times-circle'></i> ";
			addForm.validate({
				ignore: [], 
				errorPlacement: function(error, element) {
                    if (element.is(":radio")){
                        error.appendTo(element.parent().parent().parent());
                    } else {
                       error.appendTo(element.parent());
                    }
                },
				rules: {
					resourceParent: "required",
					resourceName: "required",
					menuType: "required",
					resourceOrder: {required:true , number:true}
				}
			});
			
        });
		
		function selectMenuType(self){
			var type = $(self).val();
   			if (type == "1") { // 标题
                $("#resourceLink").parents(".form-group").hide();
                $("#permission").parents(".form-group").hide();
                $("#resourceIcon").parents(".form-group").show();
                $("input[name='visible']").parents(".form-group").show();
            } else if (type == "0") { // 功能
            	$("#resourceLink").parents(".form-group").show();
                $("#permission").parents(".form-group").show();
                $("#resourceIcon").parents(".form-group").show();
                $("input[name='visible']").parents(".form-group").show();
            } else if (type == "8") { // 按钮
            	$("#resourceLink").parents(".form-group").hide();
                $("#permission").parents(".form-group").show();
                $("#resourceIcon").parents(".form-group").hide();
                $("input[name='visible']").parents(".form-group").hide();
            }
		}
		
		/*菜单管理-新增-选择菜单树*/
        function selectMenuTree() {
        	var url = ctx+"boot/platform/menus/selectMenus?applicationId=" + $("input[name=applicationId]").val() ;
			var options = {
				title: '菜单选择',
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		
		function doSubmit(index, layero){
			var body = layer.getChildFrame('body', index);
			var id = body.find('#treeId').val() ; 
			var label = body.find('#treeName').val() ; 
   			$("#resourceParent").val(id) ; 
   			$("#resourceParentLabel").val(label) ; 
   			layer.close(index);
		}

		function submitHandler() {
			var result = $.validate.form("addForm");
			if(result){
				$.operate.save(ctx+"boot/platform/menus/update" , addForm.serialize());
			}
	    }

	</script>

</body>
</html>
